/**
* 描述：企业登录页面
*/
<style lang="scss" scoped>
  @import 'style/style';
  @import 'src/styles/common';
  @import 'src/styles/icons';
  @import 'src/styles/company/common';
  canvas {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
  }
  .main-login{
    overflow-y: auto;
    min-height: 540px;
  }
  // 企业中心输入框无圆角
     .formNoRadius3{
       font-size: 14px;
  .ivu-form-item-label{
    line-height: 24px;height: 42px;font-size: 14px;
  }
  .ivu-input, .ivu-select-input, .ivu-select-selection{
    border-radius: 0 !important;
  }
  .ivu-select, .ivu-input, textarea,.ivu-date-picker{
    width:450px;box-sizing: content-box;font-size: 14px;
  }
  .ivu-select-selection{
    height: 40px;line-height: 40px;
  }
  .ivu-input{
    width:410px;
  }
  .yanzheng{
  .ivu-input{
    width: 160px;
  }
  .ivu-form-item-content{
    width: 450px;
  }
  }
  .shouji{
  .ivu-input{
    width: 220px;
  }
  .ivu-form-item-content{
    width: 450px;
  }
  }
  textarea{
    width:434px !important;background: #fcfcfc;
  }
  .logo-uploader{
    border:1px #ccc dashed;height: 100px;width: 100px;
  .el-icon-plus{
    width:10px;height: 10px;margin:42px;
  }
  }
  button{
    font-size: 14px;width:120px;text-align: center;
  }
  .date .ivu-icon-ios-calendar-outline, .date .ivu-icon-ios-close{
    padding:6px;
  }
  }
</style>
<template>
  <div class="main-login">
    <div class="l-login-headerTop">
      <div class="l-inner clearfix">
        <div class="logo fl">
          <img src="/static/images/web/company/wzlogo.png" width="70" height="78" alt="微职">
          <i class="name">微职-最贴心的校园招聘平台</i>
          <div class="clear"></div>
        </div>
        <div class="fr" style="margin-top:32px;">
            <span class="fl">
              <i class="iconCom iconCom_index02"></i>
              <i class="font">政府合作</i>
              <div class="clear"></div>
            </span>
          <span class="fl">
              <i class="iconCom iconCom_index01"></i>
              <i class="font">城市代理</i>
              <div class="clear"></div>
            </span>
          <span class="fl">
                <i class="iconCom iconCom_index03"></i>
                <i class="font">手机微职</i>
                <div class="clear"></div>
            </span>
          <span class="fl">
                <i class="iconCom iconCom_index04"></i>
                <i class="font">企业服务</i>
                <div class="clear"></div>
            </span>
          <div class="clear"></div>
        </div>
      </div>
    </div>

    <div class="login-bg">
      <div class="l-inner" style="width:900px;">
        <transition name="bounceLeft">
          <div class="main">
            <div class="lg-left cccShadow">
              <img src="/static/images/web/company/login_bg02.png" width="100%" height="100%" alt="登录">
            </div>
            <div class="login-form cccShadow" v-show="showLogin" @keydown.enter="login()">
              <div class="title">登录微职</div>
              <div class="titleMini">个人登录</div>
              <div class="flex-row">
                <span>账号</span>
                <div class="clear"></div>
                <input class='lf-input' v-model="loginInfo.account" placeholder='用户名' type='text'>
              </div>
              <div class="flex-row">
                <span>密码</span>
                <div class="clear"></div>
                <input class='lf-input' v-model="loginInfo.password" placeholder='密码' type='password'
                       @keyup.enter="login()">
              </div>
              <Checkbox v-model="isRemember" style="float: left">记住密码</Checkbox>
              <a style="float:right;color:#0066ff;font-size:12px;" @click="clickForgotPassword">忘记密码？</a>
              <div class="clear"></div>
              <el-button type="primary" class="lf--submit" @click="login()" :loading="loadingBut">登 录</el-button>
              <div class="zcTz"><i>还没有帐号？</i><a href="/register">免费注册 </a><i class="iconCom iconCom_index05"></i><div class="clear"></div></div>
              <div class="hr"></div>
              <div class="fonts">温馨提示：用人单位招聘人才，以任何名义向应聘者收取费用都是不被法律允许的，请应聘者提高警惕！求职者要时刻睁大眼睛，谨防招聘骗局。</div>
            </div>
            <div class="clear"></div>
          </div>
        </transition>
      </div>
    </div>
    <!--修改手机号-->
    <Modal v-model="phoneFormShow" :mask-closable="false" :closable="true" width="420" class="noTopBottomBorder">
      <p slot="header" style="color:#000;text-align:center;font-weight: bold;font-size: 18px;">
        <span>忘记密码</span>
      </p>
      <div style="transform: translateX(0%) translateZ(0px);">
        <Form ref="phoneForm" :model="phoneForm" :rules="phoneRule" :label-width="100" class="main-add-1 formNoRadius3">
          <div v-if="step == 1">
            <FormItem label="手机号：" prop="phone">
              <i-input v-model="phoneForm.phone" :maxlength="11"  placeholder="手机号"></i-input>
            </FormItem>
            <FormItem label="图片验证：" class="yanzheng">
              <i-input type="text" placeholder="请输入图片验证" v-model="captcha" style="width:100px;float: left;"/></i-input>
              <a style="text-align: center;margin-top: 10px;float: left;width:auto;float: left;margin-left: 10px;" @click="rndNum()"> 点击刷新</a>
              <img style="width:120px;float: right;margin-left:0;" :src="`/api/pub/captcha.jpg?randKey=${code}`">
              <div class="clear"></div>
            </FormItem>
          </div>
          <div v-if="step == 2">
            <FormItem label="手机验证码：" prop="smsCode" class="shouji">
              <i-input v-model="phoneForm.smsCode" :maxlength="6"  placeholder="手机验证码" style="width:150px;float: left"></i-input>
              <Button type="primary" :loading="phoneFunLoading" @click="sendSmsCode" style="width: 120px;padding:2px 0;border-radius: 0;float: right;line-height:26px;">
                <span v-if="!phoneFunLoading">发送验证码</span>
                <span v-else>{{countDown}}后重新发送</span>
              </Button>
              <div class="clear"></div>
            </FormItem>
            <FormItem label="设置新密码：" prop="password">
              <i-input v-model="phoneForm.password" :maxlength="20" type="password"  placeholder="密码6-20位，必须同时含有数字、字母"></i-input>
            </FormItem>
          </div>
        </Form>
      </div>
      <div slot="footer" style="width:100px;margin:0 auto;" v-if="step == 1">
        <i-button type="primary" size="large" @loading="addLoading" @click="changeStep" style="width:100px;margin:0 auto;">发送手机</i-button>
      </div>
      <div slot="footer" style="width:220px;margin:0 auto;" v-if="step == 2">
        <i-button type="primary" size="large" @loading="addLoading" @click="forgotPassword" style="width:100px;">确定</i-button>
        <i-button size="large" @click="stepReturnForgot" style="width:100px;">返回上一步</i-button>
      </div>
    </Modal>
  </div>
</template>
<script>
  import { mapMutations } from 'vuex';
  import md5 from 'js-md5';
  import { login } from '@/service/web/login/loginService';
  import hySwitch from '@/components/common/switch/switch';
  import { sendSmsCode, companyLoginForgot } from '@/service/company/login/loginMService';

  export default {
    data () {
      return {
        step: 1,
        loadingBut: false,
        single: true,
        isRemember: false,
        showLogin: false,
        addLoading: false,
        loginInfo: {},
        phoneFormShow: false,
        captcha: '',
        code: '',
        phoneForm: {}, // 修改手机Form
        phoneRule: {},  // 修改手机Form验证规则
        countDown: 60, // 倒计时初始值
        countDownIntervalid: null, // 倒计时定时器
        phoneFunLoading: false // 验证码loading
      };
    },
    computed: {
      transition () {
        let transitions = ['slideDown', 'zoomDown', 'bounceDown'];
        let index = this.getRandom(0, transitions.length - 1);
        return transitions[index];
      }
    },
    components: {
      hySwitch
    },
    mounted () {
      this.showLogin = true;
      this.getRemember();
      // canvas 动画
      try {
        this.init();
      } catch (e) {
      }
    },
    methods: {
      ...mapMutations([
        'LOGIN_IN',
        'USER_INFO'
      ]),
      getRandom (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      },
      // 获取密码
      getRemember () {
        let rememberInfo = this._hyTool.getStore('rememberInfo');
        console.log(rememberInfo);
        if (rememberInfo) {
          this.loginInfo = JSON.parse(rememberInfo);
          console.log(this.loginInfo.account);
          this.isRemember = true;
        }
      },
      // 登录
      async login () {
        try {
          if (!this.loginInfo.account) {
            this.$message({message: '请输入用户名', type: 'warning'});
            return;
          }
          if (!this.loginInfo.password) {
            this.$message({message: '请输入密码', type: 'warning'});
            return;
          }
          let loginInfo = this._hyTool.deepCopy(this.loginInfo);
          loginInfo.password = md5(loginInfo.password);
          let result = await login(loginInfo);
          this._hyTool.removeStore('webLoginInfo', result.data);
          this._hyTool.removeStore('companyLoginInfo', result.data);
          this._hyTool.removeStore('mgeLoginInfo', result.data);
          this._hyTool.setStore('webLoginInfo', result.data); // 保存用户登录信息
          this._hyTool.setStore('rememberInfo', this.loginInfo); // 保存帐号信息
          if (!this.isRemember) this._hyTool.removeStore('rememberInfo');
          this.$message({message: '登录成功', type: 'success'});
          this.$router.push({path: '/userCenter'});
        } catch (e) {
        }
      },
      // ---------------------------------- 忘记密码 -------------------------------
      // 点击修改手机号
      clickForgotPassword (row) {
        this.phoneForm = row;
        this.phoneFormShow = true;
        this.step = 1;
        this.phoneForm = {};
        if (this.loginInfo.account) this.phoneForm.phone = this.loginInfo.account;
        this.captcha = '';
        this.rndNum();
      },
      // 发送验证码
      async sendSmsCode () {
        if (!this.phoneForm.phone) {
          this.$Notice.info({title: '请输入手机号'});
          return;
        }
        if (!this.captcha) {
          this.$Notice.info({title: '请输入图片验证码'});
          this.step = 1;
          this.captcha = '';
          return;
        }
        this.phoneFunLoading = true;
        await sendSmsCode({phone: this.phoneForm.phone}, {randKey: this.code, captcha: this.captcha}); // 获取短信验证码接口
        this.$Notice.success({title: '发送成功'});
        this.countDownIntervalid = setInterval(() => {
          if (this.countDown <= 0) {
            this.phoneFunLoading = false;
            clearInterval(this.countDownIntervalid);
            this.countDown = 60;
          } else {
            this.countDown = this.countDown - 1;
          }
        }, 1000);
      },
      changeStep () {
        if (!this.phoneForm.phone) {
          this.$Notice.success({title: '请填写手机号!'});
          return;
        }
        let reg = /^(1[3,4,5,6,7,8])\d{9}$/;
        if (!reg.test(this.phoneForm.phone)) {
          this.$Notice.success({title: '手机号格式错误'});
          return;
        }
        if (!this.captcha) {
          this.$Notice.success({title: '请填写图片验证码!'});
          this.step = 1;
          this.captcha = '';
          return;
        }
        this.step = 2;
        this.phoneForm.smsCode = '';
        this.phoneForm.password = '';
        this.sendSmsCode();
      },
      // 生成随机数 5位 即 随机生成图片
      rndNum () {
        let xxx = Math.random().toString(36).substr(2);
        let aa = xxx.slice(0, 5);
        this.code = aa;
      },
      // 确认修改手机
      async forgotPassword (name) {
        if (!this.phoneForm.smsCode) {
          this.$Notice.success({title: '请填写手机验证码!'});
          return;
        }
        if (!this.phoneForm.password) {
          this.$Notice.success({title: '请填写新密码!'});
          return;
        }
        let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[,.#%’+*-:;^_`0-9A-Za-z]{6,20}$/;
        if (!reg.test(this.phoneForm.password)) {
          this.$Notice.success({title: '密码6-20位，必须同时含有数字、字母!'});
          return;
        }
        if (!this.captcha) {
          this.$Notice.success({title: '请填写图片验证码!'});
          this.step = 1;
          this.captcha = '';
          return;
        }
        try {
          let para = {
            phone: this.phoneForm.phone,
            smsCode: this.phoneForm.smsCode,
            password: this.phoneForm.password
          };
          this.formLoading = true;
          await companyLoginForgot(para);
          this.$Notice.success({title: '操作成功'});
          this.cencelForgot();
        } catch (e) {
          console.log(e);
        }
      }
    },
    watch: {
      userInfo: {
        deep: true,
        handler: function (val) {
          if (val.id) {
            this.$message({
              type: 'success',
              message: '检测到您之前登录过，将自动登录'
            });
            this.$router.push('/main/home');
          }
        }
      }
    }
  };
</script>
